<?php
use_helper('I18N');
?>
<div class="breadcrumbs" id="breadcrumbs">
<script type="text/javascript">
    $(function() {
        $("#btnSubmit").click(function(){
            $("#transferForm").submit();
        });

        $("#transferForm").validate({
            messages : {
                transactionPassword: {
                    remote: "Security Password is not valid."
                }
            },
            rules : {
                "sponsorId" : {
                    required: true
                    //, minlength : 8
                },
                "epointAmount" : {
                    required : true
                },
                "transactionPassword" : {
                    required : true,
                    remote: "/member/verifyTransactionPassword"
                }
            },
            submitHandler: function(form) {
                waiting();
                var amount = $('#epointAmount').autoNumericGet();
                var epointBalance = $('#epointBalance').autoNumericGet();
                //console.log(amount);
                //console.log(epointBalance);
                if (parseFloat(epointBalance) < (parseFloat(amount))) {
                    error("<?php echo __("In-sufficient e-Point")?>");
                    return false;
                }

                $("#epointAmount").val(amount);
                form.submit();
            }
        });

        $("#sponsorId").change(function() {
            if ($.trim($('#sponsorId').val()) != "") {
                verifySponsorId();
            }
        });

        $('#epointAmount').autoNumeric({
            mDec: 2
        });
    });

    function verifySponsorId() {
        waiting();
        $.ajax({
            type : 'POST',
            url : "/member/verifySameGroupSponsorId",
            dataType : 'json',
            cache: false,
            data: {
                sponsorId : $('#sponsorId').val()
            },
            success : function(data) {
                if (data == null || data == "") {
                    alert("<?php echo __("Invalid username.")?>");
                    $('#sponsorId').focus();
                    $("#sponsorName").val("");
                } else {
                    $.unblockUI();
                    $("#sponsorName").val(data.fullname);
                }
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                alert("Your login attempt was not successful. Please try again.");
            }
        });
    }
</script>
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#"><?php echo __('My Account') ?></a>
        </li>
        <li class="active"><?php echo __('CP1 Transfer') ?></li>
    </ul>
    <!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input"
                       id="nav-search-input" autocomplete="off"/>
                <i class="icon-search nav-search-icon"></i>
            </span>
        </form>
    </div>
    <!-- #nav-search -->
</div>

<div class="page-content">
<div class="page-header">
    <h1>
        <?php echo __('My Account') ?>
        <small>
            <i class="icon-double-angle-right"></i>
            <?php echo __('CP1 Transfer') ?>
        </small>
    </h1>
</div>
<!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->

<?php include_component('component', 'alert', array('param' => $sf_user->getAttribute(Globals::SESSION_DISTID, 0))) ?>

<div class="row">
<div class="space-6"></div>

<div class="col-xs-12">
    <div class="table-responsive">
        <form action="/member/transferCp1" id="transferForm" name="transferForm" method="post" class="form-horizontal" role="form">

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="sponsorId"><?php echo __('Transfer To Member ID'); ?></label>

                <div class="col-sm-9">
                    <input type="text" name="sponsorId" id="sponsorId" placeholder="<?php echo __('Transfer To Member ID'); ?>" class="col-xs-10 col-sm-5" value="<?php echo number_format($ledgerAccountBalance, 2); ?>"/>
                </div>
            </div>

            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="sponsorName"><?php echo __('Full Name'); ?></label>

                <div class="col-sm-9">
                    <input name="sponsorName" type="text" id="sponsorName" placeholder="<?php echo __('Full Name'); ?>" readonly="readonly" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="epointBalance"><?php echo __('CP1 Balance'); ?></label>

                <div class="col-sm-9">
                    <input name="epointBalance" type="text" id="epointBalance" placeholder="<?php echo __('CP1 Balance'); ?>" value="<?php echo number_format($ledgerAccountBalance, 2); ?>" readonly="readonly" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="epointAmount"><?php echo __('Transfer CP1 Amount'); ?></label>

                <div class="col-sm-9">
                    <input name="epointAmount" type="text" id="epointAmount" placeholder="<?php echo __('Transfer CP1 Amount'); ?>" value="<?php echo number_format($ledgerAccountBalance, 2); ?>" readonly="readonly" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="transactionPassword"><?php echo __('Security Password'); ?></label>

                <div class="col-sm-9">
                    <input name="transactionPassword" type="password" id="transactionPassword"
                                            class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>

            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" type="button" id="btnSubmit">
                        <i class="icon-ok bigger-110"></i>
                        <?php echo __('Submit') ?>
                    </button>
                </div>
            </div>
        </form>


        <script type="text/javascript" language="javascript">
            var datagrid = null;
            $(function() {
                datagrid = $("#datagrid").r9jasonDataTable({
                    // online1DataTable extra params
                    "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
                    "extraParam" : function(aoData) { // pass extra params to server
                        aoData.push({ "name": "filterAction", "value": "TRANSFER TO" });
                    },
                    "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                        reassignDatagridEventAttr();
                    },

                    // datatables params
                    "bLengthChange": true,
                    "bFilter": false,
                    "bProcessing": true,
                    "bServerSide": true,
                    "bAutoWidth": false,
                    "sAjaxSource": "/finance/epointLogList",
                    "sPaginationType": "full_numbers",
                    "aaSorting": [
                        [0,'desc']
                    ],
                    "aoColumns": [
                        { "sName" : "created_on",  "bSortable": true},
                        { "sName" : "transaction_type",  "bSortable": true},
                        { "sName" : "credit", "bVisible" : true,  "bSortable": true},
                        { "sName" : "debit",  "bSortable": true},
                        { "sName" : "balance",  "bSortable": true},
                        { "sName" : "remark",  "bSortable": true}
                    ]
                });
            }); // end function

            function reassignDatagridEventAttr() {
                $("a[id=editLink]").click(function(event) {

                });
            }
        </script>
        <div class="table-header">
            <?php echo __('CP1 Transfer History') ?>
        </div>
        <div class="table-responsive">
        <table class="table table-striped table-bordered table-hover" id="datagrid" border="0" width="100%">
            <thead>
            <tr>
                <th><?php echo __('Date') ?></th>
                <th><?php echo __('Transaction Type') ?></th>
                <th><?php echo __('In') ?></th>
                <th><?php echo __('Out') ?></th>
                <th><?php echo __('Balance') ?></th>
                <th><?php echo __('Remarks') ?></th>
            </tr>
            </thead>
        </table>
        </div>
    </div>
</div>

<div class="vspace-sm"></div>

<!-- /span -->
</div>
<!-- /row -->

<div class="hr hr32 hr-dotted"></div>

<!-- /row -->

<!-- PAGE CONTENT ENDS -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div><!-- /.page-content -->